<template>
	<view class="page">
		<u-input v-model="content" placeholder="请留下你的评论" clearable suffix-icon-style="color: #909399" shape="circle"
			border="none" font-size="13px" @clear="clearSearch" @confirm="handleSearch" :custom-style="{
		  background: '#F4F4F4',
		  padding: '6px 12px',
		  boxShadow: '0 0 20rpx rgba(186, 186, 186, 0.1)',
		}" />
		<view class="remarkBox" style="background-color: #fff;">
			<view class="navItem" v-for="(i,index) in dataList" :key="index">
				<image :src="$imageOss(i.user_avatar)" mode="aspectFill" style="" class="image"></image>
				<text class="bot1">{{i.user_nickname}} : </text>
				<text class="bot1" style="margin-left: 10rpx;">{{i.msg}}</text>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
	</view>
</template>

<script>
	import {
		comment,
		comment_list
	} from "@/request/homeApi.js";
	export default {
		data() {
			return {
				content: "", // 评论内容
				dataList: [], // 评论列表
				last_page: 1,
				status: "nomore"
			};
		},
		props: {
			typeId: {
				type: [String, Number],
				default: 1,
			},
			// 类型 1=汇资讯,2=学才艺,3=赶大集,4=享活动,5=读好书,6=订场馆,7=品非遗
			type: {
				type: [String, Number],
				default: 1,
			},
			adminId: {
				type: [String, Number],
				default: "",
				required: false,
			},
			page:{
				type: [String, Number],
				default: 1,
			},
		},
		
		mounted() {
			this.getList();
		},
		watch:{
			page(v){
				this.getList()
			}
		},
		methods: {
			// 搜索
			handleSearch() {
				this.dataList = []
				let that = this
				comment({
					type: that.type,
					msg: that.content,
					type_id: that.typeId,
					admin_id: that.adminId,
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功，待审核',
							duration: 1500,
							icon: 'none',
						})
						that.content = ''
						that.getList()
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
				});

			},

			// 清空搜索框
			clearSearch() {
				this.content = ''
				this.page = 1;
				this.dataList = []
				this.getList();
			},

			// 获取数据列表
			getList() {
				let that = this
				let data = {
					type_id: that.typeId,
					type: that.type,
					page: that.page,
					limit: 10,
				}
				comment_list(data).then(res => {
					if (res.code == 200) {
						that.dataList = that.dataList.concat(res.data.list)
						that.last_page = Math.ceil(res.data.count / res.data.list.length)
						that.$emit('lastPage',that.last_page)
						res.data.count == 0 ? that.status = 'nomore' : that.status = ''
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx;
		.remarkBox {
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #909090;

			.navItem {
				width: 98%;
				text-align: center;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				margin: 20rpx auto;

				.image {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
			}
		}
	}
</style>